<template>
  <div>
    <Card class="formCard">
      <Form ref="formQuality" :model="formItem" style="display: block;">
        <Row>
          <i-col span="5">
            <FormItem prop="yearMonth">
              <DatePicker
                v-model="formItem.yearMonth"
                type="month"
                placeholder="统计年月"
                :editable="false"
                style="width:100%"
                :options="dateOptions"
                @on-change="dateChange"
              ></DatePicker>
            </FormItem>
          </i-col>
          <i-col span="5" style="margin: 0 30px;">
            <FormItem prop="organization">
              <Cascader change-on-select :data="organizationList" v-model="formItem.managecome" @on-change="organizationChange" placeholder="续期专员机构" clearable></Cascader>
            </FormItem>
          </i-col>
          <i-col span="5">
            <FormItem prop="name">
              <Select
                v-model="formItem.reagentCode"
                placeholder="续期专员姓名"
                clearable
              >
                <Option
                  v-for="item in reagentNameList"
                  :key="item.key"
                  :value="item.key"
                  >{{ item.value }}-{{ item.key }}</Option
                >
              </Select>
            </FormItem>
          </i-col>
        <!-- </Row>
        <Row gutter="30"> -->
          <i-col span="7">
            <Button
              type="primary"
              class="resetButton"
              @click="submitForm(0)"
              :loading="queryLoading"
              style="margin-left: 30px;"
              >查询</Button
            >
            <Button class="resetButton" @click="resetForm" style="margin: 0 10px;">重置</Button>
            <Button type="primary" class="resetButton" @click="uploadExcel"
              >品质录入</Button
            >
          </i-col>
        </Row>
      </Form>
    </Card>
    <!-- 数据表格 -->
    <div :class="minHeight == true ? 'minheight' : ''" ref="tableCardHeight">
      <Card class="tableCard">
        <Table :columns="qualityColumns" :data="qualityData">
          <template slot-scope="{ row }" slot="yearMonth">
            <span
              >{{ row.yearMonth ? row.yearMonth.substr(0, 4) : "" }}年{{
                row.yearMonth ? row.yearMonth.substr(5, 6) : ""
              }}月</span
            >
          </template>
          <template slot-scope="{ row }" slot="managecomName">
            <span>{{ row.managecom }}-{{ row.managecomName }}</span>
          </template>
          <template slot-scope="{ row }" slot="reagentName">
            <span>{{ row.reagentName }}-{{ row.reagentCode }}</span>
          </template>
          <template slot-scope="{ row }" slot="addsubScore">
            <span
              :class="{
                aboveAct: row.addsubScore < 0,
                buttomAct: row.addsubScore >= 0
              }"
              >{{ row.addsubScore }}</span
            >
          </template>
          <template slot-scope="{ row }" slot="option">
            <span style="color:#2D8CF0; cursor:pointer;" @click="showModal(row)" class="btn-detail">查看详情</span>
          </template>
        </Table>
        <!-- 分页 -->
        <Row>
          <i-col
            span="24"
            style="text-align:right;margin-top:20px;margin-bottom:40px;"
          >
            <Page
              :total="total"
              show-total
              show-sizer
              @on-change="pageChange"
              @on-page-size-change="pageSizeChange"
              :page-size-opts="pageSizeOptions"
            />
          </i-col>
        </Row>
      </Card>
    </div>
    <Modal
      v-model="modalDet"
      class-name="vertical-center-modal"
      footer-hide="true"
      :mask-closable="false"
      :styles="{ top: '250px' }"
      width="60%"
      closable
    >
      <span slot="header" class="detTitle">品质详情</span>
      <div>
        <Row class="bigivurow">
          <i-col span="12">
            <Row>
              <i-col span="5">
                <p class="det-title">所属机构</p>
              </i-col>
              <i-col span="19">
                <p class="det-info">
                  {{ modalList.managecom }}-{{ modalList.managecomName }}
                </p>
              </i-col>
            </Row>
            <Row>
              <i-col span="5">
                <p class="det-title">续期专员</p>
              </i-col>
              <i-col span="19">
                <p class="det-info">
                  {{ modalList.reagentName }}-{{ modalList.reagentCode }}
                </p>
              </i-col>
            </Row>
            <Row>
              <i-col span="5">
                <p class="det-title">记录人</p>
              </i-col>
              <i-col span="19">
                <p class="det-info">{{ modalList.operator }}</p>
              </i-col>
            </Row>
            <Row>
              <i-col span="5">
                <p class="det-title">品质类型</p>
              </i-col>
              <i-col span="19">
                <p class="det-info">{{ modalList.scoreType }}</p>
              </i-col>
            </Row>
            <Row>
              <i-col span="5">
                <p class="det-title">品质年月</p>
              </i-col>
              <i-col span="19">
                <p class="det-info">
                  {{
                    modalList.yearMonth ? modalList.yearMonth.substr(0, 4) : ""
                  }}年{{
                    modalList.yearMonth ? modalList.yearMonth.substr(5, 6) : ""
                  }}月
                </p>
              </i-col>
            </Row>
            <Row>
              <i-col span="5">
                <p class="det-title">品质加扣分</p>
              </i-col>
              <i-col span="19">
                <p class="det-info">{{ modalList.addsubScore }}</p>
              </i-col>
            </Row>
            <Row>
              <i-col span="5">
                <p class="det-title">录入详情</p>
              </i-col>
              <i-col span="19">
                <p
                  class="det-info"
                  style="max-height:100px; overflow-x:hidden;"
                >
                  {{ modalList.detail }}
                </p>
              </i-col>
            </Row>
          </i-col>
          <i-col offset="14">
            <Card style="border:0">
              <p slot="title">相关文件</p>
              <div
                style="margin-top:10px; border:1px solid #e8eaec; min-height:200px;"
              >
                <Row
                  style="height: 50px; background-color:rgba(24, 144, 255, 0.04);"
                >
                  <i-col span="10">
                    <p
                      style="height: 50px; line-height: 50px; padding-left:20px;"
                    >
                      文件名称
                    </p>
                  </i-col>
                  <i-col offset="16">
                    <p
                      style="height: 50px; line-height: 50px; padding-left:20px;"
                    >
                      操作
                    </p>
                  </i-col>
                </Row>
                <div v-if="clientFile != null">
                  <Row
                    v-for="item in clientFile"
                    :key="item.id"
                    style="height:35px;"
                  >
                    <i-col span="14">
                      <p
                        style="height: 30px; line-height: 30px; padding-left:20px;"
                      >
                        {{ item.fileName }}
                      </p>
                    </i-col>
                    <i-col offset="18">
                      <p
                        v-if="item.fileFormat == 'pdf'"
                        style="height: 30px; line-height: 30px; padding-left:20px; color:#2D8CF0; cursor:pointer;"
                        @click="download(item.fileUrl)"
                        >查看</p>
                      <p
                        v-if="item.fileFormat == 'mp4'"
                        style="height: 30px; line-height: 30px; padding-left:20px; color:#2D8CF0; cursor:pointer;"
                        @click="playVideo(item)"
                        >播放</p>
                    </i-col>
                  </Row>
                </div>
                <Row v-if="clientFile == null">
                  <i-col
                    span="24"
                    style="min-height:100px; line-height:100px; text-align:center;"
                    >暂无数据</i-col
                  >
                </Row>
              </div>
            </Card>
          </i-col>
        </Row>
      </div>
    </Modal>

     <!-- 播放视频 -->
    <Modal
      footer-hide="true"
      :value="videoModal"
      :mask-closable="true"
      @on-visible-change="modalVisibleChange"
      :closable="false"
    >
      <span class="photoModal">
        <video :src="photoItem" controls id="video1" controlslist="nodownload" />
      </span>
    </Modal>

    <Button type="primary" @click="info" v-if="false"></Button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      formItem: {
        yearMonth: null,
        managecome: [],
        reagentCode: []
      },
      organizationList: [],
      reagentNameList: [],
      qualityColumns: [
        {
          title: "品质年月",
          key: "yearMonth",
          slot: "yearMonth",
          fixed: "left",
          align: "center",
          width: "180"
        },
        {
          title: "续期管理机构",
          key: "managecomName",
          align: "center",
          width: "300",
          slot: "managecomName"
        },
        {
          title: "续期专员",
          key: "reagentName",
          align: "center",
          width: "200",
          slot: "reagentName"
        },
        {
          title: "记录人",
          key: "operator",
          align: "center",
          width: "140"
        },
        {
          title: "品质类型",
          key: "scoreType",
          align: "center",
          width: "180"
        },
        {
          title: "品质加扣分",
          key: "addsubScore",
          align: "center",
          width: "120",
          slot: "addsubScore"
        },
        {
          title: "详情",
          key: "detailSlice",
          minWidth: 600
        },
        {
          title: "操作",
          key: "option",
          align: "center",
          fixed: "right",
          width: "200",
          slot: "option"
        }
      ],
      qualityData: [],
      modalList: {},
      modelFileList: [],
      // 分页数据
      total: 0,
      pageIndex: 1,
      pageSize: 10,
      pageSizeOptions: [5, 10, 15, 20],
      pageObj: [],
      modalDet: false,
      detailList: [],
      clientFile: [],
      queryLoading: false,
      minHeight: false,
      dateOptions: {
        disabledDate(date) {
          var d = new Date();
          d.setMonth(d.getMonth() + 3);
          var yy1 = d.getFullYear();
          var mm1 = d.getMonth() + 1;
          var dd1 = d.getDate();
          if (mm1 < 10) {
            mm1 = "0" + mm1;
          }
          if (dd1 < 10) {
            dd1 = "0" + dd1;
          }
          return (
            date &&
            (date.valueOf() > Date.parse(yy1 + "-" + mm1 + "-" + dd1) ||
              date.valueOf() < Date.parse("2019-04"))
          );
        }
      },
      currentCom: null,
      videoModal:false,
      photoItem:''
    };
  },
  methods: {
    info(tip) {
      this.$Message.info(tip);
    },
    // 获取用户信息
    getUserInfo() {
      this.api.getUserInfo().then(res => {
        this.currentCom = res.data.managecom;
        this.submitForm(1);
      });
    },
    // 改变时间
    dateChange(e) {
      if (this.formItem.yearMonth) {
        this.formItem.yearMonth = e.substr(0, 4) + "-" + e.substr(5, 7);
      }
      // console.log(this.formItem.yearMonth)
    },
    // 获取续期专员机构下拉框信息
    getAllOrganization() {
      // this.api.selectUerList().then(res => {
      //   if (res.code == 200 && res.data != null) {
      //     this.organizationList = res.data[0].listKeyValueVOS;
      //   } else {
      //     this.organizationList = [];
      //   }
      // });
      this.api.remanagecomList().then(res => {
        if (res.code == 200 && res.data != null) {
          let arr = []
          arr.push(res.data)
          arr.forEach(one=>{
            one.value = one.comcode
            one.label = one.comcode + '-' + one.name
            one.children = one.chilDren || []
            if (one.children) {
              one.chilDren.forEach(two=>{
                two.value = two.comcode
                two.label = two.comcode + '-' + two.name
                two.children = two.chilDren || []
                if (two.children) {
                  two.children.forEach(three=>{
                    three.value = three.comcode
                    three.label = three.comcode + '-' + three.name
                    three.children = three.chilDren || []
                    if (three.children) {
                      three.children.forEach(four=>{
                        four.value = four.comcode
                        four.label = four.comcode + '-' + four.name
                        four.children = four.chilDren || []
                      })
                    }
                  })
                }
              })
            }
          })
          console.log(arr);
          this.organizationList = arr
        } else {
          this.organizationList = [];
        }
      });
    },
    // 获取续期专员姓名下拉框信息
    organizationChange(value) {
      if (!value) {
        this.reagentNameList = [];
      } else {
        this.api.selectXQCode({ managecom: value[value.length-1] }).then(res => {
          if (res.code == 200) {
            if (res.data) {
              this.reagentNameList = res.data;
            } else {
              this.reagentNameList = [];
            }
            // console.log(res);
          } else {
            this.reagentNameList = [];
            this.$Message.info(res.msg);
          }
        });
      }
    },
    // 查询
    submitForm(tmp) {
      if (tmp != 1) {
        this.queryLoading = true;
      }
      this.qualityData = [];

      let obj = {
        index: 1,
        pageSize: 10,
        managecome: this.formItem.managecome[this.formItem.managecome.length-1] || '',
        reagentCode: this.formItem.reagentCode,
        yearMonth: this.formItem.yearMonth
      };
      if (this.formItem.managecome == null) {
        obj.managecome = this.currentCom;
      }
      for (let item in obj) {
        if (obj[item] == null || obj[item].length == 0) {
          delete obj[item];
        }
      }
      this.pageObj = obj;
      // console.log(obj);
      this.api.selectEntering(obj).then(res => {
        if (res.code == 200) {
          if (res.data.records) {
            res.data.records.forEach(element => {
              //console.log(element.detail,element.detail.length);
              if (element.detail) {
                if (element.detail.length > 30) {
                  let item = element.detail.substr(0, 30) + "...";
                  element["detailSlice"] = item;
                } else if (element.detail.length > 0) {
                  element["detailSlice"] = element.detail;
                }
              } else {
                element["detailSlice"] = "暂无详情";
                element.detail = "暂无详情";
              }
              this.qualityData.push(element);
            });
            // console.log(this.qualityData)
          }
          this.total = res.data.total;
          this.queryLoading = false;

          if (tmp != 1) {
            this.info(res.msg);
          }
        } else {
          this.queryLoading = false;
          this.total = 0;
          this.info(res.msg);
        }
      });
    },
    // 分页查询
    pageSubmit() {
      this.pageObj.index = this.pageIndex;
      this.pageObj.pageSize = this.pageSize;

      this.qualityData = [];
      this.api.selectEntering(this.pageObj).then(res => {
        if (res.code == 200) {
          if (res.data.records) {
            res.data.records.forEach(element => {
              //console.log(element.detail,element.detail.length);
              if (element.detail) {
                if (element.detail.length > 30) {
                  let item = element.detail.substr(0, 30) + "...";
                  element["detailSlice"] = item;
                } else if (element.detail.length > 0) {
                  element["detailSlice"] = element.detail;
                }
              } else {
                element["detailSlice"] = "暂无详情";
                element.detail = "暂无详情";
              }
              this.qualityData.push(element);
            });
            // console.log(this.qualityData)
          }
          this.total = res.data.total;
        } else {
          this.total = 0;
          this.info(res.msg);
        }
      });
    },
    // 重置
    resetForm() {
      this.$refs.formQuality.resetFields();
      this.formItem = {
        date: null,
        organization: null,
        name: null
      };
      this.queryLoading = false;
    },
    // 页面切换
    pageChange(index) {
      this.pageIndex = index;
      this.pageSubmit();
    },
    // 每页数量切换
    pageSizeChange(pageSize) {
      this.pageSize = pageSize;
      this.pageSubmit();
    },
    // 品质录入
    uploadExcel() {
      this.$router.push({
        path: "record1"
      });
    },
    adjustHeight() {
      if (this.$refs.tableCardHeight.scrollHeight < 460) {
        this.minHeight = true;
      }
    },
    // 查看详情
    showModal(row) {
      this.modalDet = true;
      this.modalList = row;
      this.clientFile = [];
      this.api.getFileNames({ id: row.id }).then(res => {
        if (res.code == 200) {
          if (res.data.length > 0) {
            res.data.forEach(element => {
              let hz = element.fileName.split(".");
              element["fileFormat"] = hz[hz.length-1];
              this.clientFile.push(element);
            });
          }
        }
      });
    },

    // 查看PDF
    download(fileUrl) {
      window.open(fileUrl + "#toolbar=0");
    },
    // 关闭视频弹窗
    modalVisibleChange(value) {
      if (!value) {
        this.videoModal = false;
        let video1 = document.getElementById("video1");
        video1.pause();
      }
    },

    // 播放视频
    playVideo(item) {
      this.videoModal = true;
      this.photoItem = item.fileUrl;
    },
  },
  mounted() {
    this.getUserInfo();
    this.getAllOrganization();
  }
};
</script>

<style lang="less" scoped>
@import "./index";
</style>

<style scoped>
.bigivurow{
  display: block;
}
.bigivurow .ivu-col-offset-14,.bigivurow .ivu-col-offset-16{
  margin-left: 0;
}
.ivu-modal-header {
  background-color: #2d8cf0;
}
.ivu-modal-close .ivu-icon-ios-close {
  color: #fff !important;
}
/* .ivu-form-item{
  margin-bottom: 0;
} */
</style>
